<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="filter-container">
      <el-select style="width: 220px" v-model="query.type" class="filter-item" placeholder="请选择标签类型" clearable>
        <el-option v-for="i in typeOptions" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-select style="width: 220px" v-model="query.level" class="filter-item" placeholder="请选择标签层级" clearable>
        <el-option v-for="i in levelOptions" :key="i.value" :label="i.label" :value="i.value">
        </el-option>
      </el-select>
      <el-input style="width: 220px" placeholder="输入标签名称查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString">
      </el-input>
      <el-select style="width: 200px" v-model="query.materialId" class="filter-item" filterable remote reserve-keyword
        placeholder="请选择物料" :remote-method="querySearchAsync" clearable>
        <el-option v-for="item in restaurants" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button class="filter-item " type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item " type="info" plain @click="exportData" v-permission="'labelDesign.exportData'"
        :loading="exportLoading">导出</el-button>
      <el-button type="primary" class="filter-item " @click="createItems" v-permission="'labelDesign.add'">
        创建标签模板
      </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" @row-click="mainRowClick" :columns="columns"
      @editItem="goInfo($event,true)" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'labelDesign',
  data: function () {
    return {
      api: this.$api.label,
      apiSingle: this.$api.label + 'getbyid',
      baseUrl: this.$api.baseUrl,
      apiCreate: this.$api.label + 'modify',
      apiEdit: this.$api.label + 'modify',
      name: '物料标签档案',
      columns: [
        { title: '是否通用', key: 'is_common_name', width: 80 },
        { title: '档案类型', key: 'document_type_name', width: 120 },
        { title: '标签类型', key: 'label_type_name', width: 120 },
        { title: '标签层级', key: 'level_name', width: 160 },
        { title: '标签名称', key: 'name' },
        { title: '备注', key: 'remarks' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [],
      query: {
        cust_id: null,
        key_part_no: null,
      },
      tableProps: {
        border: true,
        opsColWith: 80,
        hideOperations: false,
        highlightCurrentRow: true,
      },
      formProps: {
        dialogWidth: '80%',
        labelWidth: '120px',
      },
      initData: { labels: [], name: '', document_type: '', is_common: 0 },
      typeOptions: [
        { label: '在线设计', value: 1 },
        { label: 'CodeSoft', value: 2 },
        { label: 'Bartender', value: 3 },
      ],
      labelUploaderProps: {},
      designBaseUrl: '/labelDesign/index.html',
      designUrl: '',
      designVisible: false,
      row: {},
      dicObj: {},
      labelTypeOptions: [],
      levelObj: {},
      levelOptions: [],
      // 上传
      formData: null,
      restaurants: [],
    }
  },
  mounted() {},
  methods: {
    research() {
      this.row = {}
      this.getList()
    },
    //物料远程搜索
    querySearchAsync(queryString) {
      let params = {
        queryString: queryString,
        page: 1,
        size: 100,
      }
      this.$request(this.baseUrl + 'masterdata/mat/getlist_v10', params).then((res) => {
        this.restaurants = res.list.map((i) => {
          return {
            label: i.key_part_no + '/' + i.key_part_name,
            value: i.id,
          }
        })
      })
    },
    createItems() {
      this.goInfo({ id: null }, false)
    },
    // 创建标签模板
    goInfo(item, flag) {
      this.$router
        .push({
          name: 'labelDesignInfo',
          query: {
            id: item.id,
            isEdit: flag,
          },
        })
        .catch(() => {})
    },
    mainRowClick(row) {
      this.row = row
    },
    labelDesign(id) {
      if (this.editFormVisible) this.editFormVisible = false
      this.designUrl = `${this.designBaseUrl}?id=${id}&api=${this.$api.label}`
      this.designVisible = true
    },
    formatList(list) {
      //依据实际需求处理
      list.forEach((i) => {
        let typename = this.typeOptions.find((j) => j.value == i.document_type)
        i.level_name = this.levelObj[i.level]
        i.document_type_name = typename ? typename.label : ''
        i.label_type_name = this.dicObj[i.label_type]
        i.is_common_name = i.is_common == 0 ? '否' : '是'
      })
      return list
    },
    formatAfterGet(data) {
      //依据实际需求处理
      data.labels = data.file_list.length ? [{ name: data.file_list[0].name, url: data.file_list[0].url }] : []
      data.label_type = data.label_type.toString()
      return data
    },
    formatBeforeSave(data) {
      //依据实际需求处理
      let tmp = _.cloneDeep(data)
      return tmp
    },
    newLink(url) {
      let a = document.createElement('a')
      a.setAttribute('href', url)
      a.setAttribute('target', '_blank')
      a.click()
      a.remove()
    },
  },
  created: function () {
    this.$request(this.$api.dictionary + 'getdirectchildren', {
      parentType: 'package_level_name',
    }).then((r) => {
      r.forEach((v) => {
        this.levelObj[v.value] = v.label
      })

      this.levelOptions = r
    })

    this.$request(this.$api.dictionary + 'getdirectchildren', {
      parentType: 'barcode_label_type',
    }).then((r) => {
      this.labelTypeOptions = r
      r.forEach((v) => {
        this.dicObj[v.value] = v.label
      })
    })

    this.getList()
  },
}
</script>
<style lang="scss" scoped>
::v-deep .design-dialog .el-dialog__body {
  padding: 0 !important;
}
</style>
